<template>
  <a-modal
    :visible='visible'
    title="温度明细"
    width="100%"
    :footer="null"
    :mask-closable='false'
    :destroy-on-close='true'
    :style="{ top: '0px' }"
    @update:visible='updateVisible'
  >
    <div class="ele-body">
      <div class="block-interval">
        <a-card
          :bordered="false"
          :body-style="{padding: '16px 6px 0 0'}">
          <v-chart
            ref="ch4Chart"
            style="height: 362px;"
            :option="methaneChartOption"/>
        </a-card>
      </div>

      <div>
        <a-card :bordered="false">
          <ele-pro-table
            ref="table"
            row-key="liedownId"
            :datasource="datasource"
            :columns="columns"
            :where="where"
            :scroll="{ x: 'max-content' }"
          >
          </ele-pro-table>
        </a-card>
      </div>

    </div>

  </a-modal>
</template>

<script>
import { provide } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import 'echarts-wordcloud';
import { ChartTheme } from 'ele-admin-pro';
import moment from "moment";
import {DeviceLiedownApi} from "@/api/property/cattlesports/DeviceLiedownApi";

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent
]);

provide(THEME_KEY, ChartTheme);

export default {
  name: 'CattleManagerCattleLiedownRangeDataTemp',
  components: {
    VChart
  },
  emits: ['update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    data: Object
  },
  mounted() {
    this.getNewData();
  },
  computed: {
    methaneChartOption(){
      return {
        title : {
          text : "温度明细报表"
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['温度(℃)'],
          right: 20
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.lieTimesData.map(d => d.time)
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '温度(℃)',
            type: 'line',
            data: this.lieTimesData.map(d => d.temp)
          }
        ]
      }
    }
  },
  data() {
    return {
      // 表格列配置
      columns: [
        {
          title: '时间',
          dataIndex: 'createTime'
        },
        {
          title: '温度(℃)',
          dataIndex: 'temp',
        }
      ],
      // 表格搜索条件
      where: {
        "cattleId": this.data.cattleId,
        "searchBeginTime" : this.data.beginTime,
        "searchEndTime" : this.data.endTime,
      },
      // 当前编辑数据
      current : null,
      // 是否显示编辑弹窗
      showDetail : false,
      lieTimesData : []
    }
  },
  methods: {
    getNewData() {
      let that = this;
      let params = {
        "cattleId": that.data.cattleId,
        "orderBy": "create_time",
        "sortBy": "ASC",
        searchBeginTime: moment().subtract(7, 'days').format('YYYY-MM-DD'),
        searchEndTime: moment().format('YYYY-MM-DD'),
      };

      if (that.where.searchBeginTime && that.where.searchEndTime) {
        params.searchBeginTime = that.where.searchBeginTime;
        params.searchEndTime = that.where.searchEndTime;
      }

      DeviceLiedownApi.list(params).then(result => {
        let rows = result.data || [];
        let _lieTimesData = [];
        if (rows && rows.length > 0) {
          rows.forEach(function (item) {
            let formatItem = {
              time: item.createTime.substr(0, 16),
              temp: item.temp,
            };
            _lieTimesData.push(formatItem);
          });
        } else {
          _lieTimesData.push({
            time: moment().subtract(20, 'minute').format('YYYY-MM-DD HH:mm'),
            standTime: 0,
            lieTime: 0
          });
          _lieTimesData.push({
            time: moment().subtract(10, 'minute').format('YYYY-MM-DD HH:mm'),
            standTime: 0,
            lieTime: 0
          });
          _lieTimesData.push({
            time: moment().subtract(5, 'minute').format('YYYY-MM-DD HH:mm'),
            standTime: 0,
            lieTime: 0
          });
        }
        that.lieTimesData = _lieTimesData;
      });
    },
    /**
     * 搜索按钮
     *
     * @author cancan
     * @date 2022/03/05 14:48
     */
    reload() {
      this.selection = [];
      this.$refs.table.reload({page: 1});
    }
    ,

    /**
     * 重置搜索
     *
     * @author cancan
     * @date 2022/03/05 14:48
     */
    reset() {
      this.where.cattleId = this.data.cattleId;
      this.where.searchBeginTime = this.data.beginTime;
      this.where.searchEndTime =  this.data.endTime;
      this.$nextTick(() => {
        this.reload();
      });
    },
    /**
     * 获取表格数据
     *
     * @author fengshuonan
     * @date 2022/5/8 15:18
     */
    datasource({page, limit, where, orders}) {
      return DeviceLiedownApi.findPage({...where, ...orders, pageNo: page, pageSize: limit});
    },
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    activated() {
      ['ch4Chart'].forEach((name) => {
        this.$refs[name].resize();
      });
    }
  }
};
</script>
